<template>
    <div class="person">
        <el-row>
            <el-col :span="24">
                <div class="grid-content">
                    <h2>个人信息</h2>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <transition name="el-zoom-in-center">
                <el-card>
                    <el-col :span="8" style="text-align: center;">
                        <img :src="imageUrl" width="92px" height="92px" />
                    </el-col>
                    <el-col class="info" :span="16">
                        <h3 style="float: left;">基础资料</h3>
                        <a href="#" @click="handEdit" style="float: right;">编辑</a>
                        <div>用户名：{{ customer.username }}</div>
                        <div>真实姓名：{{ customer.name }}</div>
                        <div>联系电话：{{ customer.phone }}</div>
                    </el-col>
                </el-card>
            </transition>
        </el-row>
        <el-dialog title="编辑" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="用户名" label-width="120px">
                    <el-input v-model="form.username" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="真实姓名" label-width="120px">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" label-width="120px">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="头像" label-width="120px">
                    <el-upload class="avatar-uploader" action="http://localhost:8081/common/upload" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :on-change="onChange" ref="upload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" width="92px" height="92px" />
                        <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 6;"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelDialog">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import FrontAside from '@/components/FrontAside.vue'
export default {
    name: "FrontPerson",
    components: {
        FrontAside
    },
    data() {
        return {
            dialogFormVisible: false,
            form: {},
            customer: localStorage.getItem("customer") ? JSON.parse(localStorage.getItem("customer")) : {},
            imageUrl: ''
        }
    },
    created() {
        this.imageUrl = "http://localhost:8081/common/download?name=" + this.customer.image
        this.form = this.customer
        console.log("这是customer" + this.customer);
    },
    methods: {
        async getCustomer() {
            // this.request.post("/customer/login", this.user).then(res => {

            // })
        },
        handEdit() {
            //打开修改个人信息弹窗
            this.form = JSON.parse(JSON.stringify(this.customer))//此处转换类型 不让form影响customer内的值
            this.dialogFormVisible = true
        },
        cancelDialog() {
            //取消弹窗
            console.log("customer===>", this.customer);
            this.imageUrl = "http://localhost:8081/common/download?name=" + this.customer.image
            this.dialogFormVisible = false

            this.form = {}
        },
        save() {
            //保存个人信息
            this.request.post("/customer", this.form).then(res => {
                if (res.code == 200) {
                    this.$message.info("修改成功")
                    localStorage.removeItem("customer");
                    localStorage.setItem("customer", JSON.stringify(this.form))
                    this.$bus.$emit("getCustomerImageAndName", this.form)
                } else {
                    this.$message.error("修改失败")
                }
                this.dialogFormVisible = false;
            })
        },
        handleAvatarSuccess(res) {
            this.imageUrl = "http://localhost:8081/common/download?name=" + res.msg//图片回显
            this.form.image = res.msg
            console.log(this.form.image);

        },
        onChange(file) {//校验图片格式
            if (file) {
                const suffix = file.name.split('.')[1]
                const size = file.size / 1024 / 1024 < 2
                if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) {
                    this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                    this.$refs.upload.clearFiles()
                    return false
                }
                if (!size) {
                    this.$message.error('上传文件大小不能超过 2MB!')
                    return false
                }
                return file
            }
        },
    }
}
</script>

<style lang="less" scoped>
.person {
    h2 {
        font-size: 22px;
        font-weight: lighter;
        padding-bottom: 20px;
        border-bottom: 1px solid #E6E6E6;
        margin-bottom: 30px;
    }

    h3 {
        font-size: 25px;
    }

    .info {
        a {
            text-decoration: none;
            color: gray;
        }

        div {
            clear: both;
            padding: 10px 0px;
        }
    }
}
</style>